<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>12html그룹과시맨텍</title>
		<!--[if lt IE 9]>
		<script src="js/html5/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>
		<h1 >Block Elements</h1>
		<p style="border:2px solid red; height:300px">블럭단위요소</p>
		<h3 style="border:2px solid blue">블럭 단위 요소</h3>
		<ul style="border:2px solid orange">
			<li>블럭단위요소</li>
			<li>블럭단위요소</li>
			<li>블럭단위요소</li>
		</ul>
		<hr/>
		<h1>Inline Elements</h1>
		<b style="color: red; border:1px solid red" >편집자 주</b> = 연합뉴스는<strong style="border:1px solid red">2013년 스포츠 10대 뉴스</strong> 를
		 선정해 종합기사와 함께 관련 기사 10꼭지를 송고합니다.<br/>
		 10대 뉴스는 먼저 연합뉴스 스포츠부에서 26개 후보 항목을 추려서
		 12월 2일부터 8일까지 전국 주요 언론사 스포츠 담당 부서장에게
		   이메일을 보내 10개의 뉴스를 뽑도록 한 뒤 순위별 가중치를 감안해 선정했습니다.<br/>
		 2017년 <em style="border:1px solid black; height:300px">국제축구연맹(FIFA)</em> 20세 이하 월드컵 유치 등 조사 기간 발생한 사안은 반영하지 못했습니다
		<!--블럭 vs 인라인 요소-->
		<!--
			block level element
			항상 새로운 줄에서 시작되는 요소. 자동으로 줄바꿈이 되고 상하 여백이 포함
			가로 크기는 부모 요소의 너비에 따라 조정
			width,height 속성으로 임의로 크기 지정가능
			div,p,ul,li,h1-h6,form,table,hr,fieldset
			
			inline level element
			주변 요소와 같은 줄에 나란히 나타나는 요소
			가로크기는 요소의 내용에 따라 조정
			width,height 속성으로 크기 변경 불가
			span, a, img, string, em, b,label,input,select,textarea
			
			
		-->
		<hr/>
		<h1>요소 그룹화</h1>
		<div>
			<h1 >Block Elements</h1>
			<p style="border:2px solid red; height:300px">블럭단위요소</p>
			<h3 style="border:2px solid blue">블럭 단위 요소</h3>
			<ul style="border:2px solid orange">
				<li>블럭단위요소</li>
				<li>블럭단위요소</li>
				<li>블럭단위요소</li>
			</ul>
		</div>
		
		<span>
			<h1>Inline Elements</h1>
			<b style="color: red; border:1px solid red" >편집자 주</b> = 
			  연합뉴스는<strong style="border:1px solid red">2013년 스포츠 10대 뉴스</strong> 를
			  선정해 종합기사와 함께 관련 기사 10꼭지를 송고합니다.<br/>
			 10대 뉴스는 먼저 연합뉴스 스포츠부에서 26개 후보 항목을 추려서
		 	 12월 2일부터 8일까지 전국 주요 언론사 스포츠 담당 부서장에게
		  	  이메일을 보내 10개의 뉴스를 뽑도록 한 뒤 순위별 가중치를 감안해 선정했습니다.<br/>
		 	 2017년 <em style="border:1px solid black; height:300px">국제축구연맹(FIFA)</em> 
		 	 20세 이하 월드컵 유치 등 조사 기간 발생한 사안은 반영하지 못했습니다
		</span>
		
		<!--div vs span
			
			div : 블럭 요소 그룹화 태그 
			요소들을 하나의 블록 요소로  그룹화할 수 있음
			그룹화 대상은 블럭요소와 인라인 요소 모두가능 
			단, p 태그는 다른 블럭요소를 포함x
			
			span : 인라인 요소 그룹화 태그
			요소들을 하나의 인라인 요소로 그룹화 할 수 있음
			텍스트들을 서로 구분하고 싶거나 인라인 요소들만을 하나로 묶기 위해 사용
			
			참고 : CSS의 display 속성을 이용하면 inline요소를 block요소처럼,
			block요소를 inline요소 처럼, inline 이면서 block요소인 것 처럼 표현할 수 있음
		-->
		<hr/>
		<h1>웹 페이지 레이아웃(0)-테이블 태그 이용</h1>
		<table style=""   width="950" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td height="115"><table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td width="15%" height="85" align="center">로고</td>
        <td align="center">배너/광고</td>
      </tr>
      <tr>
        <td height="30" colspan="2" align="center">내비게이션 메뉴</td>
        </tr>
    </table></td>
  </tr>
  <tr>
    <td height="550"><table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td width="15%" height="550" align="center">메뉴바</td>
        <td align="center">본문영역</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="100"><table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td height="30" colspan="2" align="center">내비게이션 매뉴</td>
        </tr>
      <tr>
        <td width="15%" height="70" align="center">로고</td>
        <td align="center">저작권/연락처</td>
      </tr>
    </table></td>
  </tr>
</table>
		<hr/>
		<h1>웹 페이지 레이아웃(1)-그룹화 태그 이용</h1>
		
		<div id="header">
			<div id="logo" style="width:145px; height:85px; border:1px solid blue;float:left">로고</div><!-- // 로고-->
			<div id="ad" style="width:805px; height:85px; border:1px solid green; float:left">배너/광고</div><!-- // //배너/광고-->
			<div id="nav" style="width:950px; height:30px; border:1px solid red; clear:both">내비게이션 메뉴</div><!-- // 내비게이션 메뉴-->
		</div><!-- // 머릿글 영역-->
		<div id="content">
			<div id="menu" style="width:145px; height:550px; border:1px solid red;float: left ">메뉴바</div>
			<div id="main" style="width:805px; height:550px; border:1px solid red;float: left ">본문영역</div>
		</div><!-- // 본문글 영역-->
		<div id="footer">
			<div id="nav1" style="width:950px; height:30px; border:1px solid silver; clear : both ">내비게이션 메뉴</div>
			<div id="ad1" style="width:145px; height:70px; border:1px solid gold; float:left">저작권</div>
			<div id="logo1" style="width:805px; height:70px; border:1px solid black; float:left ">로고</div>
		</div><!-- // 꼬릿글 영역-->
		
		<hr style="clear: both"/>
		<h1>웹 페이지 레이아웃(2)-시맨틱 태그 이용</h1>	
		<header>
			<h1 id="hdlogo" style="margin:0;width:145px; height:85px; border:1px solid blue;float:left">로고</h1><!-- // 로고-->
			<div id="hdad" style="width:805px; height:85px; border:1px solid green; float:left">배너/광고</div><!-- // //배너/광고-->
			<nav style="width:950px; height:30px; border:1px solid red; clear:both">내비게이션 메뉴</nav><!-- // 내비게이션 메뉴-->
		</header><!-- // 머릿글 영역-->
		<div id="sftcontents">
			<aside style="width:145px; height:550px; border:1px solid red;float: left ">메뉴바</aside>
			<section id="main1" style="width:805px; height:550px; border:1px solid red;float: left ">본문영역</section>
		</div><!-- // 본문글 영역-->
		<footer>
			<nav style="width:950px; height:30px; border:1px solid silver; clear : both ">내비게이션 메뉴</nav>
			<h1 id="sftlogo" style="margin:0;width:145px; height:70px; border:1px solid gold; float:left">로고</h1>
			<div id="sftcopy" style="width:805px; height:70px; border:1px solid black; float:left ">저작권</div>
		</footer><!-- // 꼬릿글 영역-->
		<hr style="clear: both"/>
		
		<!--
			전통적 레이아웃
			웹 디자이너들은 머릿글, 본문, 꼬릿글,메뉴등 웹 페이지와 관련있는 요소들을 구룹화 하는데 div태그를 사용했음
			div 역할을 지정하기 위해 id,class속성 사용		
		
			html5레이아웃 요소
			html5에서는 웹 페이지를 여러 영역으로 나눠 의미가 있는 요소를 사용할 수 있게 함
			요소 이름으로 각 영역의 의미를 파악
		
			header
			사이트 이름, 로고, 네비게이션 메뉴를 포함하는 영역에 사용(머릿글)
			
			footer
			개인정보취급방침, 조건 , 조항, 저작권
			정보를 포함하는 영역에 사용(꼬릿글)
			
			nav
			페이지 상/하단에 배치되는 주요메뉴 영역 footer의 개인정보취급방침, 조건 , 조항들처럼
			페이지 하단의 링크도 nav 요소에 포함됨
			
			article
			문서나 페이지 또는 사이트의 독립적인 부분을 구성하는 구역을 의미(본문)
			중첩사용가능
			
			aside
			article밖의 aside는 전체 페이지와 관련된 컨텐츠에 대한 바구니 역할 담당
			article내 aside는 기사와 관련 있지만 필수적이지 않은 정보 나열시 사용
			
			section
			컨텐츠를 그룹화하는데 사용 각section에는 제목이 존재해야 함
			기사가 길 경우 section요소로 나누면 좋음
			
			이전 브라우저 지원
			이전 브라우저는 html5시멘틱 태그 지원 x
			임시 해결책으로 html5 shiv/shim 이라는 자바 스크립트 라이브러리 사용
			IE9 이하에서만 동작하도록 조건부 주석사용
			
		-->
			
			
		
		
		
	</body>
</html>
